<template>
    <div class="play-page" v-show="show">
        <div class="movie-top">
            <div class="bnt">
              <el-button @click="closeWin" type="primary" class="btn" size="mini">关闭</el-button>
            </div>
            <h3 class="main-title"><span>{{title}}</span></h3>
            <div class="go-box">
                <div class="home iconfont iconfangzi" @click="goPage('/index')">首页</div>
                <!-- <div class="center iconfont iconxuexi" @click="goPage('/home')">学习中心</div> -->
            </div>
        </div>
        <div class="movie-content">
            <div class="left see-video animated" @contextmenu.prevent="menuPlayer()">

                <!-- <video-player class="vjs-custom-skin videoPlay vjs-big-play-centered" ref="videoPlayer" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
                </video-player> -->
                <div id="container" class="pptClass" style="position: relative;">
                  <pdf :src="src"
                       ref="pdf"
                       v-show="loadedRatio===1"
                       :page="currentPage"
                       @num-pages="pageCount=$event"
                       @progress="loadedRatio = $event"
                       @page-loaded="currentPage=$event"
                       @loaded="loadPdfHandler"
                       @link-clicked="currentPage = $event"
                       class="myPdf"
                       id="pdfID"></pdf>
                       <div class="progress"
                            v-show="loadedRatio!==1">
                         <el-progress type="circle"
                                      :width="70"
                                      color="#53a7ff"
                                      :percentage="Math.floor(loadedRatio * 100)"></el-progress>
                         <br>
                         <!-- 加载提示语 -->
                         <span>{{remindShow}}</span>
                       </div>
                </div>

                <!-- 加载未完成时，展示进度条组件并计算进度 -->


                  <!-- 上一页、下一页 -->
                  <div class="right-div">
                    <div class="time2" v-show="lookTime1>0">
                      <div class="time1">{{lookTime}}</div>秒后可翻页
                    </div>
                    <div class="time">学习时长：<span style="color: #0076ca;">{{studyTime}}</span></div>
                    <div class="right-btn">

                      <el-button @click="changePdfPage('first')"
                           class="turn">
                        首页
                      </el-button>
                    <!-- 在按钮不符合条件时禁用 -->
                      <el-button @click="changePdfPage('pre')"
                           class="turn-btn"
                           :disabled = 'currentPage===1'
                           >
                        上一页
                      </el-button>
                      <el-button id="notAllowed" @click="changePdfPage('next')"
                            :disabled = '((currentPage===pageCount) || !canNext)'
                            :title = "((currentPage===pageCount)?'已是最后一页':'')"
                           class="turn-btn"
                           >
                        下一页
                      </el-button>
                      <el-button @click="changePdfPage('last')"
                           class="turn"
                           :disabled = 'dataPage<pageCount-1'
                           >
                        尾页
                      </el-button>
                      <!-- 输入页码 -->
                      <div class="pageNum">
                        <el-input v-model.number="currentPage"
                        size="mini"
                               type="number"
                               class="inputNumber"
                               :disabled="!canNext"
                               @input="inputEvent()" /> / {{pageCount}}
                      </div>
                    </div>
                  </div>
            </div>
            <div class="right animated">
                <div class="see-list" >
                    <h3 class="list-title">PPT列表</h3>
                    <div class="list-main ">
                      <div class="bar-right" v-show="shou">
                        <i class="el-icon-arrow-right"></i>
                      </div>
                      <div class="bar-left" v-show="!shou">
                        <i class="el-icon-arrow-left"></i>
                      </div>

                      <el-scrollbar ref="elscrollbar" class="list-all">
                        <div class="list-item"  v-for="(item,index) in pptList"  :class="item.active?'item-active':''" >
                          <!-- <div class="lock" v-show="!item.studyFlag">
                            <img src="../static/image/lock.png">
                          </div> -->
                          <div @click="gotoppt(item.educationDoc.id)" class="nolock">
                            <!-- <img :src="$axios.defaults.baseURL + item.educationDoc.photo" alt="开始学习" > -->
                            <img v-show="item.active" src="../assets/image/active.gif"/>
                            <img v-show="!item.active" src="../assets/image/no-active.png"/>
                            <span class="name" :title="item.detailName">{{item.detailName}}</span>
                            <i class="el-icon-video-play play"></i>
                          </div>
                        </div>
                      </el-scrollbar>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
import'../assets/css/style.less'
import'../assets/css/fonts/iconfont.css'
import Cookies from 'js-cookie'
import pdf from 'vue-pdf'

export default {
    components: {
      pdf
    },
    data(){
        return{
          // ----- loading -----
          remindText: {
            loading: '加载文件中，文件较大请耐心等待...',
            refresh: '若卡住不动，可刷新页面重新加载...'
          },
          remindShow: '加载文件中，文件较大请耐心等待...',
          intervalID: '',
          // ----- vuepdf -----
          // src静态路径: /static/xxx.pdf
          // src服务器路径: 'http://.../xxx.pdf'
          src: '',
          // 当前页数
          currentPage: 0,
          // 总页数
          pageCount: 0,
          // 加载进度
          loadedRatio: 0,
          courseName:'',
          courseType:'',
          privateId:'',
          courseId:'',
          nowTime:null,//当前时间
          studyTime:0,//学习时间
          startTime:null,//初始化时间
          title:'',
          sTime:'',
          target:'',
          detailId:'',
          dataPage:'',//数据库中记录的最大学习页码
          lookTime:'',//每页ppt的观看时间
          lookTime1:'',//每页ppt的观看时间
          timer:null,
          canNext:false,
            shou:true,
            show:false,

            List:[],
            List1:[],
            wet:{},
            shangchuan:true,
            start:false,
            type:'',
            courseHours:0,
            activeIndex:0,
            blur:false,
            playing:false,
            isHand:false,
            photoUrl:'',
            pptList:[],//ppt课程列表。一个课程可有多个ppt
            studyList:[],//学习记录列表
            timer2:'',
        }
    },
    created(){
      this.detailId = this.$route.params.detailId
    },
    beforeDestroy() {
      if(this.sTime) {
      　　　　clearInterval(this.sTime); //关闭
      　}  //利用vue的生命周期函数
      if(this.timer) {
      　　　　clearInterval(this.timer); //关闭
      　}  //利用vue的生命周期函数
    },
    destroyed () {
      // 在页面销毁时记得清空 setInterval
      clearInterval(this.intervalID)
      if(this.sTime) {
      　　　　clearInterval(this.sTime); //关闭
      　}  //利用vue的生命周期函数
      if(this.timer) {
      　　　　clearInterval(this.timer); //关闭
      　}  //利用vue的生命周期函数
    },
    mounted(){
        this.show = true;
        $(".play-page").parents("div").css("height","100%");

        var w = $(window).width();
        $(window).resize(function(){
            w = $(window).width()
            console.log(w,22)
            //窗口变化时，先关闭右侧列表栏，然后重新打开
            // $(".right").animate( { right: "-370px",width: "0%" }, 300,function(){
            //   that.shou = false;
            // });
            // $(".left").animate( { width: "100%" }, 300);


        })
        $(function(){
          $(".bar-right").click(function(){
            console.log(w,333)
              $(".right").animate( { right: "-370px",width: "0%" }, 300,function(){
                that.shou = false;
              });
              $(".left").animate( { width: "100%" }, 300);
          })

          $(".bar-left").click(function(){
            console.log(w,444)
              $(".right").animate( { right: "0",width: "370px" }, 300,function(){
                that.shou = true;
              });
              $(".left").animate( { width: (w-370).toString()+"px" }, 300);
          })


        })

         $(document).ready(function(){
            $('#video').bind('contextmenu',function() { return false; });
        });

        if(Cookies.get("token")){
            // this.getData();
            this.getWet();
        }
        else{
          this.$router.push("/login");
        }

        $(".vjs-control-bar").append("<div class='zhe'></div>")
        let that = this;
        this.$nextTick(()=>{

            window.onblur = function () {
                that.blur = true;
                if(that.playing){
                    that.player.pause();
                    that.isHand = true;
                }

            }
            window.onfocus = function(){
                console.log(that.blur)
                if(that.blur && that.isHand){
                    that.isHand = false;
                    that.blur = false;
                    that.player.play();
                    that.playing = true;
                }

            }
        })
        // 更改 loading 文字
        this.intervalID = setInterval(() => {
          this.remindShow === this.remindText.refresh
            ? this.remindShow = this.remindText.loading
            : this.remindShow = this.remindText.refresh
        }, 4000)
        // 监听滚动条事件
        // this.listenerFunction()
        //页面实例化的时候开始计时
        this.getData1(this.$route.params.id)
    },
    head() {
        return {
          title: '观看PPT',
        }
    },
    methods:{
      //关闭当前窗口
      closeWin(){
        if (navigator.userAgent.indexOf("MSIE") > 0) {
        if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
        window.opener = null; window.close();
        }else {
        window.open('', '_top'); window.top.close();
        }
        }else if (navigator.userAgent.indexOf("Firefox") > 0) {
        window.location.href = 'about:blank ';
        //火狐默认状态非window.open的页面window.close是无效的
        //window.history.go(-2);
        }else {
        window.opener = null;
        window.open('', '_self', '');
        window.close();
        }
      },
      goPage(url){
          this.$router.push(url);
      },
      //根据ppt的id
      gotoppt(detailId){
        if(this.sTime){
          clearInterval(this.sTime)
        }
        this.detailId = detailId
        this.pptList.forEach((item,index)=>{
          if(item.educationDoc.id == detailId){
            //赋值ppt链接
            this.src = this.$axios.defaults.baseURL + item.educationDoc.fileUrl
            item.active = true
          }else{
            item.active = false
          }
        })
        this.timer2 = setInterval(()=>{
            if(this.loadedRatio == 1){
              this.initDate()
              clearInterval(this.timer2)
            }
        },500)


        // this.$nextTick(()=>{
        //   this.src = this.$axios.defaults.baseURL + item.educationDoc.fileUrl
        //   this.detailId = item.educationDoc.id

        //   console.log(this.src,444)
        // })
        // this.getData1(item.courseId)
      },
      //添加学习记录（a为最大学习页码数，b为学习时间）
        addStudyCenter(a,b){
          var that = this;
          this.$axios.$post('/f/saveUserVideoRecord?courseId='+this.courseId+'&courseType='+this.type+'&pages='+a+'&detailId=' +this.detailId + '&rootCourseId='+this.privateId+'&studyTime='+b+'&target='+this.target)
          .then(function (response) {

          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
        },
        initDate(){
          if(this.timer){
            clearInterval(this.timer)
          }
          this.startTime = (new Date())
          //此次页面的学习开始时间
          this.thisTime = (new Date())

          // let url = that.$axios.defaults.baseURL + response.data.course.courseInfo.educationCoursePptDetailsList[0].educationDoc.fileUrl
          // that.src = url
          let time
          if(this.studyList && this.studyList.length!=0){
            this.studyList.forEach((item,i)=>{
              if(item.detailId == this.detailId){
                this.dataPage = item.pages
                time = item.studyTime
              }else{
                this.dataPage = 1 //首次的话，默认最大页码学习数为1
                time = 0
              }
            })
          }else{
            this.dataPage = 1 //首次的话，默认最大页码学习数为1
            time = 0
          }
          this.startTime = Date.parse(this.startTime) - time*1000
          this.sTime = setInterval(()=>{
            //获取当前时间，减去进入页面时间则是现有的学习时间，总的学习时间还需加上服务器返回的总时间
            const total = Date.parse(new Date()) - this.startTime;
            const minutes = Math.floor((total / 1000 / 60) % 60);
            const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
            this.studyTime = hours + '时' + minutes + '分'
            let iTime = Math.floor(total / 1000);
            //如果当前页码小于返回数据中的页码，则不传此次页码数
            let upPages = null
            if(this.currentPage>this.dataPage){
              upPages = this.currentPage
              this.dataPage = upPages
            }else{
              upPages = this.dataPage
            }
            this.addStudyCenter(upPages,iTime)
          },3000)

          this.setTime()

        },
        setTime(){
          //每页观看时间倒计时
          this.lookTime = this.lookTime1
          if(this.lookTime<=0) return
          this.timer = setInterval(()=>{
            this.canNext = false
            this.lookTime --
            //倒计时等于0后，自动翻页
            if(this.lookTime == 0){
              this.canNext = true
              this.lookTime = this.lookTime1
              clearInterval(this.timer)
            }
          },1000)
        },
        getData1(id){
            // this.startTime = (new Date())
            // //此次页面的学习开始时间
            // this.thisTime = (new Date())
            var that = this;
            this.$axios.$post("/f/course?id="+id)
            .then(function (response) {

              let data = Object.assign(response.data.course,response.data.course.courseInfo)
              that.title = data.courseName;
              that.type = data.courseType;
              that.privateId = data.privateId;
              that.courseId = data.courseId;
              that.lookTime = data.lookTime
              that.lookTime1 = data.lookTime
              if(that.lookTime1<=0){
                that.canNext = true
              }
              if(Number(data.presentPrice)==0){
                  that.target = "0";
              }
              else{
                  that.target = "1";
              }

              that.studyList = response.data.userStudy

              that.pptList = data.educationCoursePptDetailsList;
              that.gotoppt(that.detailId)
              console.log(that.pptList,555)
            })
            .catch(function (error) {
              // handle error
              console.log(error);
            })
        },
        // 监听滚动条事件
        // listenerFunction (e) {
        //   document.getElementById('container').addEventListener('scroll', true)
        // },
        // 页面回到顶部
        toTop () {
          document.getElementById('container').scrollTop = 0
        },
        // 输入页码时校验
        inputEvent () {
          if (this.currentPage > this.dataPage) {
            // 1. 跳转页码不能大于学习记录中存放的最大学习页码
            this.currentPage = this.dataPage
          } else if (this.currentPage < 1) {
            // 2. 小于min
            this.currentPage = 1
          }
          // if (this.currentPage > this.pageCount) {
          //   // 1. 大于max
          //   this.currentPage = this.pageCount
          // } else if (this.currentPage < 1) {
          //   // 2. 小于min
          //   this.currentPage = 1
          // }
        },
        // 切换页数
        changePdfPage (val) {
          clearInterval(this.timer)
          if (val === 'pre' && this.currentPage > 1) {
            // 切换后页面回到顶部
            this.currentPage--
            this.toTop()
          } else if (val === 'next' && this.currentPage < this.pageCount) {
            this.currentPage++
            this.toTop()
          } else if (val === 'first') {
            this.currentPage = 1
            this.toTop()
          } else if (val === 'last' && this.currentPage < this.pageCount) {
            this.currentPage = this.pageCount
            this.toTop()
          }
          this.setTime()
        },

        // pdf加载时
        loadPdfHandler (e) {
          // 加载的时候先加载第一页
          this.currentPage = 1
        },

        // 禁用鼠标右击、F12 来禁止打印和打开调试工具
        prohibit () {
          // console.log(document)
          document.oncontextmenu = function () {
            return false
          }
          document.onkeydown = function (e) {
            if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
              return false
            }
            if (e.keyCode === 18 || e.keyCode === 123) {
              return false
            }
          }
        },
        getWet(){
            let that = this;
            this.$axios.$get("/f/index")
            .then(function (response) {
                that.wet = response.data.webSiteSetings;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },

    }
}
</script>

<style lang="less" scoped>

.play-page {
    width:100%;
    height:100%;
    .movie-content{
        width:100%;
        height:calc(100% - 50px);
        display:flex;
        padding: 10px 0;
        .left{
            width:calc(100% - 370px);
            height:100%;
            float:left;
            position: relative;
            // height: 80%;
            // overflow-y: auto;
            // padding: 20px;
            .pptClass{
              height: calc(100% - 50px);
              overflow-y: auto;
              padding: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              .myPdf{
                width: 90%;
                padding: 0 5%;
                height: auto;
              }
            }
            .time{
              font-size: 16px;
              width: 160px;
              text-align: center;
              height: 100%;
              line-height: 50px;
            }
            .time2{
              display: flex;
              font-size: 16px;
              width: 160px;
              text-align: center;
              height: 100%;
              line-height: 50px;
              align-items: center;
              justify-content: center;
            }
            .time1{
              width: 30px;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              background-color: #0076ca;
              color: #ffffff;
              font-size: 16px;
              text-align: center;
              margin-right: 5px;
            }
            .right-div{
              width: 100%;
              display: flex;
              justify-content: center;
              height: 50px;
              align-items: center;
            }
            /* 右侧功能按钮区 */
            .right-btn {
              // position: fixed;
              /* right: 5%; */
              // bottom: calc(50% - 188px);
              width: 400px;
              height: 50px;
              /* height: calc(100% - 100px); */
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              z-index: 99;
              // flex-direction: column;
              align-items: center;
            }

            .pdfArea {
              width: 80%;
              /* height: 100%; */
              display: flex;
              align-items: center;
            }

            /* ------------------- 输入页码 ------------------- */
            .pageNum {
              margin: 10px 0;
              font-size: 16px;

            }


            .inputNumber {
              padding: 0;
              border-radius: 8px;
              // border: 1px solid #999999;
              // height: 35px;
              font-size: 16px;
              width: 60px;
              text-align: center;
              /*在谷歌下移除input[number]的上下箭头*/
              input::-webkit-outer-spin-button,
              input::-webkit-inner-spin-button {
                -webkit-appearance: none !important;
                margin: 0;
              }
              /*在firefox下移除input[number]的上下箭头*/
              input[type='number'] {
                -moz-appearance: textfield;
              }
            }
            /deep/.inputNumber .el-input__inner{
              text-align: center;
              padding: 0;
            }
            // .inputNumber:focus {
            //   border: 1px solid #00aeff;
            //   background-color: rgba(18, 163, 230, 0.096);
            //   outline: none;
            //   transition: 0.2s;
            // }

            /* ------------------- 切换页码 ------------------- */
            .turn {
              background-color: #0056ca;
              opacity: 0.7;
              color: #ffffff;
              height: 30px;
              width: 60px;
              // border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 5px 0;
            }

            .turn-btn {
              background-color: #0076ca;
              opacity: 0.6;
              color: #ffffff;
              height: 30px;
              width: 60px;
              // border-radius: 50%;
              margin: 5px 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .turn-btn:hover,.turn:hover {
              transition: 0.3s;
              opacity: 0.5;
              // cursor: pointer;
            }

            /* ------------------- 进度条 ------------------- */
            .progress {
              position: absolute;
              right: calc(50% - 70px);
              top: calc(50% - 70px);
              text-align: center;
            }
            .progress > span {
              color: #199edb;
              font-size: 14px;
            }
            .videoPlay{
                width:100%;
                height:100%;
                .video-js{
                    height:100%;
                    padding:0;
                    // .vjs-big-play-button {
                    //     font-size: 3em;
                    //     line-height: 1.5em;
                    //     height: 1.5em;
                    //     width: 3em;
                    //     display: block;
                    //     position: absolute;
                    //     top: 50% !important;
                    //     left: 50% !important;
                    //     padding: 0;
                    //     cursor: pointer;
                    //     opacity: 1;
                    //     border: 0.06666em solid #fff;
                    //     background-color: #2B333F;
                    //     background-color: rgba(43, 51, 63, 0.7);
                    //     border-radius: 0.3em;
                    //     transition: all 0.4s;
                    // }
                }
                #vjs_video_3{
                    width:100%;
                    height:100%;
                }
                .vjs-control{
                    float:left;
                }
                .vjs-control.vjs-button{
                    width:3rem;

                }
                .vjs-control-bar{
                    display:block\0;/* ie 8/9 */
                    .zhe{
                        position:absolute;
                        width: calc(100% - 21rem);
                        top:0;
                        right:6rem;
                        height:100%;
                    }
                }
                .vjs-progress-control{
                    width:calc(100% - 21rem);
                    .vjs-slider-horizontal{
                        position:absolute;
                        left:0;
                        top:50%;
                        transform:translateY(-50%);
                        width:calc(100% - 20px);
                    }
                }
                .vjs-time-control{
                    float:left;/* ie 8/9 */
                    width:3rem;
                }
                .vjs-time-control.vjs-time-divider{
                    width:1rem;
                }
                .vjs-control.vjs-volume-panel-vertical{
                    width:4rem;
                }
            }
        }
        .right{
            width:370px;
            height:100%;
            float:left;

            background:#fff;
            box-sizing:border-box;
            border-left:1px solid #e2e2e2;
            .see-list{
          width:100%;
          height:100%;
          background:#14191e;
          box-sizing:border-box;
          // border-left:1px solid #f4f4f4;
          float:left;
          // .list-item:hover{
          //   background:#14191e;
          //   color:#fff !important;
          //   span{
          //     color:#fff !important;
          //   }
          // }
          .item-active{
            // box-shadow: 2px 2px 10px #409eff;
            // background: #0076ca !important;
            border: 1px solid #0076ca;
            color: #0076ca !important;
            background-color: #e0e0e0 !important;
          }
          .list-item{
            width:calc(100% - 10px);
            // height:140px;
            margin:5px;
            padding:10px;
            background:#ffffff;
            border: 1px solid #e6e9eb;
            border-radius: 12px;
            position:relative;
            cursor:pointer;
            color: #0076ca;
            .nolock{
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
                  align-items: center;
                        img{
                           height: 25px;
                         }
                         .iconbofang{
                           position:absolute;
                           width:40px;
                           height:20px;
                           background:#fff;
                           border-radius:10px;
                           display:block;
                           line-height:20px;
                           text-align:center;
                           color:#3f83f2;
                           font-size:14px;
                           top:20px;
                           right:20px;
                         }
                         .play{
                           color: #000000;
                           font-size:25px;
                         }
                         .name{
                           text-align: center;
                           width:calc(100% - 195px);
                           line-height:25px;
                           font-size:16px;
                           height:25px;
                           color:#0076ca;
                           display: -webkit-box;
                           /* autoprefixer: off*/
                           -webkit-box-orient: vertical;
                           /* autoprefixer: on*/
                           -webkit-line-clamp: 3;
                           overflow: hidden;
                           white-space: nowrap;
                           text-overflow: ellipsis;
                           -o-text-overflow:ellipsis;
                         }
                         .time{
                           position:absolute;
                           line-height:25px;
                           right:15px;
                           bottom:15px;
                           font-size:14px;
                           color:#777777;
                         }
            }
            .lock{
              cursor: default;
              width:100%;
              // float:left;
              height:100%;
              top: 0;
              left: 0;
              opacity: 0.8;
              background: #a3a3a3;
              position: absolute;
              display: flex;
              align-content: stretch;
              justify-content: center;
              align-items: center;
              img{
                width: 30px;
                height: 30px;
              }
            }

          }
          .bg1{
            background:#3a7bf3;
            color:#fff !important;
            span{
              color:#fff !important;
            }
          }
          .list-main{
            width:100%;
            height:calc(100% - 60px);
            position:relative;
            background:#ffffff;
            .bar-right{
                  position: absolute;
                  background: #0f1419;
                  border-radius: 0 12px 12px 0;
                  width: 16px;
                  height: 56px;
                  left: 0;
                  top: calc(50% - 28px);
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  z-index: 2;
                  cursor: pointer;
                  i{
                    color: #ffffff;
                  }
            }
            .bar-left{
                  position: absolute;
                  background: #0f1419;
                  border-radius: 12px 0 0 12px;
                  width: 16px;
                  height: 56px;
                  left: -16px;
                  top: calc(50% - 28px);
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  z-index: 2;
                  cursor: pointer;
                  i{
                    color: #ffffff;
                  }
            }
            .list-all{
              width:100%;
              height:100%;
            }
            .iconshouqi_m,.iconshouqi_m-copy{
              width:20px;
              height:80px;
              left:-20px;
              top:50%;
              cursor:pointer;
              transform:translateY(-50%);
              position:absolute;
              background:rgba(0,0,0,0.3);
              z-index:9999;
              line-height:80px;
              text-align:center;
              font-size:16px;
              border-radius:20px 0 0 20px;
              color:#fff;
              display:block;
            }
            .el-scrollbar__wrap{
              overflow-x:hidden;
            }
            .el-scrollbar__thumb {
                background: #2b2b2b;
            }
          }
          .list-title{
            width:100%;
            // padding:0 20px;
            text-align:center;
            line-height:60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height:60px;
            font-size:20px;
            color:#3a7bf3;
            box-sizing:border-box;
            border-bottom:1px solid #f4f4f4;
            background:#ffffff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
            .video-list{
                width:100%;
                height:calc(100% - 50px);
                verflow: hidden;
                .elscrollbar{
                    width:100%;
                    height:100%;
                    box-sizing:border-box;
                    padding-top:15px ;
                    .el-scrollbar__wrap{

                    }
                    .el-scrollbar__thumb{
                        background-color: rgba(56, 57, 58, 0.5);
                    }
                    .video-item{
                        width:369px;

                        padding:0 15px;
                        height:40px;
                        display:flex;
                        align-items:center;
                        position:relative;
                        box-sizing:border-box;
                        .iconbofang{
                            font-size:14px;
                            color:#696969;
                            cursor:pointer;
                        }
                        .iconbofang:before{
                            margin-right:20px;
                            font-size:16px;
                        }
                        .active-bofang{
                            color:#000;
                        }
                        .iconfont:hover{
                            color:#000;
                        }
                        .iconsuo1,.iconjiesuo{
                            position:absolute;
                            right:20px;
                            top:50%;
                            transform:translateY(-50%);
                            font-size:16px;
                            color:#848181;
                        }
                        .iconjiesuo{
                            color:#0f83fb;
                        }
                    }
                }
            }
            .video-title{
                position:relative;
                line-height:50px;
                font-size:16px;
                color:#333;
                height:50px;
                width:100px;
                text-align:center;
                margin:0 auto;
            }
            .video-title:after{
                content:'';
                width:100%;
                height:2px;
                left:0;
                position:absolute;
                bottom:0;
                background:#409eff;
            }
        }
    }
    .movie-top{
        width:100%;
        box-sizing:border-box;
        padding:0 30px;
        height:50px;
        background:#fff;
        border-bottom:1px solid #e2e2e2;
        position:relative;
        .bnt{
          position:absolute;
          left:30px;
          height:30px;
          top:10px;
          .home{
              width:100px;
              height:30px;
              line-height:30px;
              text-align:center;
              font-size:14px;
              background:#409eff;
              color:#ffffff;
              border-radius:3px;
              margin-right:10px;
              float:left;
              cursor:pointer;
          }
        }
        .go-box{
            position:absolute;
            right:30px;
            height:30px;
            top:10px;
            .home{
                width:80px;
                height:30px;
                line-height:30px;
                text-align:center;
                font-size:14px;
                background:#409eff;
                color:#ffffff;
                border-radius:3px;
                // margin-right:10px;
                float:left;
                cursor:pointer;
            }
            .center{
                width:100px;
                height:40px;
                line-height:40px;
                text-align:center;
                font-size:14px;
                background:#67c23a;
                color:#ffffff;
                border-radius:3px;
                float:left;
                cursor:pointer;
            }
            .iconfont:before{
                font-size:18px;
                margin-right:5px;
            }
        }
    }
    .main-title{
        width:100%;
        line-height:50px;
        box-sizing:border-box;
        height:50px;
        font-size:24px;
        color:#17a2b8;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        padding-left: 100px;
        span{
            font-size:24px;
            font-weight:500;
        }
    }
}
</style>
